<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        .green{
            background: greenyellow;
            color: green;
        }
        .blue{
            background: deepskyblue;
            color: blue;
        }
        .pink{
            background: pink;
            color: deeppink;
        }
        .purple{
            background: mediumpurple;
            color: purple;
        }
        .drak{
            background: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>首页</h1>
    主题选择：
    <select name="name">
        <option value="">-请选择-</option>
        <option value="green">青青草原</option>
        <option value="blue">蔚蓝天空</option>
        <option value="pink">粉红回忆</option>
        <option value="purple">基佬快乐</option>
        <option value="drak">暗黑主题</option>
    </select>
    <a href="../html/详情页.html">新闻页</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus doloribus necessitatibus provident odit rem tenetur voluptatibus laboriosam incidunt. Pariatur tempora ipsa neque doloremque architecto enim aliquam commodi voluptates laudantium necessitatibus.</p>
    <script src="../js/jquery-1.11.3.js"></script>
    <script>
        if(localStorage.length>0){
            $("body").attr("class",localStorage.skin);
        }
       $("select").change(e=>{
          var skin= $(e.target).val();
          $("body").attr("class",skin);
          localStorage.skin=skin;
       }); 
    </script>
</body>
</html>